<template>
    <div class="table">
        <div class="crumbs">
            <Breadcrumb separator="/">
                <BreadcrumbItem><Icon type="md-contacts" /> 管理员列表</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card class="box-card" style="margin-bottom: 20px;">
            <Row :gutter="20">
                <Col :span="4">
                    <Input v-model="params.name_like" placeholder="姓名" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="4">
                    <Input v-model="params.user_like" placeholder="账号" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="4">
                    <Input v-model="params.nickname_like" placeholder="昵称" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="4">
                    <Select v-model="params.role" clearable placeholder="请选择" @on-change="search">
                        <Option v-for="(i, item) in group" :key="i" :value="i">{{item}}</Option>
                    </Select>
                </Col>
                <Col :span="4">
                    <Button type="primary" icon="md-search" @click="search">搜索</Button>
                    <Button type="warning" icon="md-refresh" @click="reset">重置</Button>
                    <Button type="success" icon="md-add" @click="add" style="float:right;">添加</Button>
                </Col>
            </Row>
        </Card>
        <Table :columns="columns" :data="tableData" stripe border highlight-row></Table>
        <Page
                :total="total"
                :current="params.page"
                :page-size="params.size"
                :page-size-opts="[10,15,20,50,100,300]"
                show-elevator
                show-sizer
                show-total
                transfer
                @on-change="handleCurrentChange"
                @on-page-size-change="handleSizeChange"
            />

        <Modal :title="dialogTitle" v-model="dialogShow" draggable>
            <Form ref="form" :model="form" :label-width="100" :rules="rules">
                <Row>
                    <Col :span="12">
                        <FormItem label="角色类型：" prop="role">
                            <Select v-model="form.role" placeholder="请选择">
                                <Option v-for="(i, item) in group" :key="i" :label="item" :value="i">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="账号：" prop="user">
                            <Input v-model="form.user" placeholder="账号"></Input>
                        </FormItem>
                        <FormItem label="昵称：" prop="nickname">
                            <Input v-model="form.nickname" placeholder="昵称"></Input>
                        </FormItem>
                        <FormItem label="密码：" prop="new_pwd">
                            <Input v-model="form.new_pwd" placeholder="不修改请留空"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="12">
                        <FormItem label="姓名：" prop="name">
                            <Input v-model="form.name" placeholder="姓名"></Input>
                        </FormItem>
                        <FormItem label="手机：" prop="mobile">
                            <Input v-model="form.mobile" placeholder="手机"></Input>
                        </FormItem>
                        <FormItem label="邮箱：" prop="email">
                            <Input v-model="form.email" placeholder="邮箱"></Input>
                        </FormItem>
                        <FormItem label="状态：" prop="st">
                            <i-switch v-model="form.st" :true-value="1" :false-value="0"></i-switch>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import vNote from '../common/note.vue'; //注释组件
    let module = 'admin';
    export default {
        components:{
            vNote
        },
        data() {
            return {
                //url: '/static/vuetable.json',
                url: pub.apiDomain + module,
                dialogTitle: '',
                cacheKey: module+'_list',
                tableData: [],
                loading: true,
                dialogShow: false,
                columns: [
                    {title: 'id', key: 'id',sortable: 'custom', sortType: 'asc'},
                    {title: '账号', key: 'user',sortable: true, tooltip:true},
                    {title: '姓名', key: 'name',sortable: true},
                    {title: '昵称', key: 'nickname',sortable: true},
                    {title: '邮箱', key: 'email',sortable: true},
                    {title: '手机', key: 'mobile',sortable: true},
                    {title: '角色', key: 'role',sortable: true},
                    {title: '状态', key: 'st',sortable: true, render: (h, params) => {
                        return <i-switch type="primary" true-value={1} false-value={0} value={params.row.st}  onOn-change={value => {
                            params.row.st = value;
                            pub.stchange(this, module, params.row);
                        }}></i-switch>
                    }},
                    {
                        title: '操作',
                        width: 200,
                        key: 'action',
                        render: (h, params) => {
                            return <span>
                                <i-button type="primary" icon="ios-create-outline" style="margin-right:6px;" onClick={(e)=>{this.handleEdit(params.row)}}>编辑</i-button>
                                <i-button type="error" icon="md-trash" onClick={(e)=>{this.remove(params.row.id)}}>删除</i-button>
                            </span>
                        }
                    }
                ],
                dialogFormVisible: false,
                //弹窗绑定字段
                form: {
                    
                },
                total: 0,
                loading: true,
                params: {   //post参数
                    page: 1,
                    size: pub.pageSize,
                },
                group:{},   //权限组
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    role: [{ required: true, message: '请选择角色类型', trigger: 'blur' }],
                    user: [{ required: true, message: '登录账号不能为空', trigger: 'blur' }],
                    new_pwd: [{ min: 6, message: '密码不能少于6位', trigger: 'blur' }],
                },
            }
        },
        created(){
            //setCache(this.cacheKey, null);
            //还原列表状态
            let params = pub.getCache(this.cacheKey);
            if(params) {
                this.params = params;
            }
            this.getData();
            this.$axios.get(pub.apiDomain + 'role/map').then((res) => {
                this.group = res.d;
            });
        },
        methods: {
            handleCurrentChange(val){
                this.params.page = val;
                this.getData();
            },
            handleSizeChange(val){
                this.params.size = val;
                this.getData();
            },
            //加载内容：在翻页或搜索后
            getData(){
                //保存列表状态
                pub.setCache(this.cacheKey, this.params);
                this.loading = true;
                this.$axios.post(this.url + '/ls', this.params).then((res) => {
                    this.tableData = res.d.data;
                    this.total = res.d.total;
                    this.loading = false;
                });
            },
            //搜索
            search(){
                this.getData();
            },
            reset(){
                this.params = {page:1,size:pub.pageSize};
                this.getData();
            },
            //删除
            remove(id) {
                if(!confirm('确定删除吗？')) return false;
                this.$axios.get(this.url + '/del/id/' + id).then(res => {
                    this.$Message.success('删除成功');
                    this.getData();
                });
            },
            cancel() {
                this.dialogShow = false;
            },
            add(){
                this.rules.new_pwd.splice(1, 1);
                this.rules.new_pwd.push({ required: true, message: '请输入密码', trigger: 'blur' });
                this.dialogTitle = '添加管理员';
                this.form = {st: 1};
                this.dialogShow = true;
            },
            //提交表单
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.dialogShow = false;
                            this.getData();
                        })
                    } else {
                        return false;
                    }
                });
            },
            //编辑
            handleEdit(row) {
                this.rules.new_pwd.splice(1, 1);
                this.$axios.get(this.url + '/get/id/' + row.id).then((res) => {
                    this.form = res.d;
                });
                this.dialogShow = true;
                this.dialogTitle = row.name;
            },
        }
    }
</script>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
.Input{margin-bottom: 3px;}
.FormItem{margin-bottom: 14px;}
</style>